<template>
<div class="exp-history">
    <div class="box-top">
        <el-form @submit.native.prevent>
            <el-form-item label="运行状态">
                <el-select clearable v-model="form.jobState" placeholder="请选择运行状态">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="提交人">
                <el-input clearable placeholder="请输入提交人" v-model="form.operUser"></el-input>
            </el-form-item>
            <el-form-item label="开始时间">
                <el-date-picker clearable v-model="form.beginTime" type="datetime" placeholder="请选择开始时间"></el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" v-preventReClick="2000" @click="search">查询</el-button>
                <el-button v-preventReClick="2000" @click="handleReset">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
    <div class="box-table">
        <el-table height="100%" v-loading="loading" :data="tableData" tooltip-effect="dark">
            <template slot="empty">
                <no-data :types="isSearch">
                    <span>暂无数据</span>
                </no-data>
            </template>
            <el-table-column label="运行状态" show-overflow-tooltip>
                <template slot-scope="scope">{{options[scope.row.runState].label}}</template>
            </el-table-column>
            <el-table-column sortable prop="startTime" label="开始时间" show-overflow-tooltip></el-table-column>
            <el-table-column sortable prop="endTime" label="结束时间" show-overflow-tooltip></el-table-column>
            <el-table-column prop="processTime" label="执行时长(s)" show-overflow-tooltip></el-table-column>
            <el-table-column prop="operUser" label="提交人" show-overflow-tooltip></el-table-column>
            <!-- <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="text" @click="handleCheck(scope.row)">查看</el-button>
                </template>
            </el-table-column> -->
        </el-table>
        <div v-if="tableData.length>0" class="box-pagenation">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
    </div>
</div>
</template>

<script>
import NoData from '@/components/NoData'
import moment from 'moment'
import { mapGetters, mapMutations } from 'vuex'
export default {
    name: 'ExpHistory',
    computed: {
        ...mapGetters({
            projectId: 'common/getProjectId'
        })
    },
    components: { NoData },
    data () {
        return {
            loading: false,
            experimentId: localStorage.getItem('experimentId'),
            experimentName: localStorage.getItem('experimentName'),
            form: {
                jobState: '',
                operUser: '',
                beginTime: ''
            },
            options: [
                { label: '准备中', value: 0 },
                { label: '排队中', value: 1 },
                { label: '运行中', value: 2 },
                { label: '运行成功', value: 3 },
                { label: '出错终止', value: 4 },
                { label: '用户终止', value: 5 }
            ],
            isSearch: false,
            total: 0,
            pageSize: 10,
            currentPage: 1,
            tableData: []
        }
    },
    created () {
        this.setHeaderBack(this.experimentName)
        this.init()
    },
    methods: {
        ...mapMutations({
            setHeaderBack: 'common/setHeaderBack'
        }),
        init () {
            this.loading = true
            const params = {
                experimentId: this.experimentId,
                projectId: this.projectId,
                pageSize: this.pageSize,
                pageNum: this.currentPage,
                ...this.form
            }
            params.beginTime = params.beginTime && moment(params.beginTime).format('YYYY-MM-DD HH:mm:ss')
            this.$post('/experiment/queryExperimentHistorys', params).then(res => {
                if (res) {
                    const {
                        total,
                        rows
                    } = res
                    this.total = total
                    this.tableData = rows
                }
            }).finally(() => {
                this.loading = false
            })
        },
        search () {
            this.isSearch = true
            this.currentPage = 1
            this.init()
        },
        handleReset () {
            this.isSearch = false
            this.form = {
                jobState: '',
                operUser: '',
                beginTime: ''
            }
            this.init()
        },
        handleCheck (item) {
            this.$message.warning('该功能尚未开发，敬请期待')
        },
        handleCurrentChange (val) {
            this.currentPage = val
            this.$emit('flash')
        },
        handleSizeChange (val) {
            this.pageSize = val
            this.$emit('flash')
        }
    }
}
</script>
<style lang="less">
    .exp-history {
        height: 100%;
        overflow: hidden;
    }
</style>
